import { useState, useCallback } from 'react'
import { IconCaretLeft } from '@arco-design/web-react/icon';
import './index.css'

function ToolBar() {
  const [visible, setVisible] = useState(false)
  const onVisble = useCallback(() => {
    setVisible((value) => !value)
  }, [setVisible])

  return (
    <div className="drawer" style={{ right: visible ? '0' : '-300px' }}>
      <div className="on-off" onClick={onVisble} style={{ transform: visible ? 'rotate(180deg)' : 'none' }}>
        <IconCaretLeft style={{ fontSize: '30px' }} />
      </div>
    </div>
  )
}

export default ToolBar
